<template>
	<view class="detailPage">
		<detail-list :item="item" @follow="follow" @doSupport="doSupport" @doComment="doComment" @doShare="doShare" />
		<!-- 分割线 -->
		<divider />
		<!-- 评论 -->
		<view class="newestComment">最新评论</view>
		<!-- 评论列表 -->
		<block v-for="(item,index) in commentList" :key="index">
			<comment-list :item="item" :index="index" />
		</block>
		<!-- 底部操作条 -->
		<bottom-input @send="send" />
		<!-- 弹出框 -->
		<share-more ref="share" />
	</view>
</template>

<script>
	import detailList from "@/components/detail/detail-list.vue";
	import bottomInput from "@/components/common/bottom-input.vue";
	import commentList from "@/components/detail/comment-list.vue";
	import shareMore from "@/components/detail/share-more.vue";
	export default {
		components: {
			detailList,
			bottomInput,
			commentList,
			shareMore
		},
		onNavigationBarButtonTap() {
			this.$refs.share.open();
		},
		onBackPress() {
			this.$refs.share.close();
		},
		onLoad(e) {
			if (e.detail) {
				this.item = JSON.parse(decodeURIComponent(e.detail));
				// 设置状态栏的标题头
				this.init(this.item);
			};
		},
		data() {
			return {
				item: null,
				// 用户评论的内容列表
				commentList: [{
					headerImage: "https://picsum.photos/100/100?random=1",
					nickName: "小猫咪",
					content: "支持国产，支持DCloud",
					date: new Date().getTime(),
					replay: 5
				}, {
					headerImage: "https://picsum.photos/100/100?random=1",
					nickName: "靓仔",
					content: "来到了吧",
					date: new Date().getTime(),
					replay: 15
				}, {
					headerImage: "https://picsum.photos/100/100?random=1",
					nickName: "好人",
					content: "支持国产",
					date: new Date().getTime(),
					replay: 10
				}],
			};
		},
		methods: {
			init(data) {
				// 修改导航栏的标题
				uni.setNavigationBarTitle({
					title: data.title
				});
			},
			// 关注
			follow() {
				this.item.follow = true;
				uni.showToast({
					title: "关注成功",
					icon: "none"
				})
			},
			// 顶踩功能
			doSupport(type) {
				// 拿到当前对象
				// let item = this.list[e.index];
				let msg = type === "support" ? "顶" : "踩";
				// 之前没有操作过的
				if (this.item.support.type === "") {
					this.item.support[type + '_count']++;
				} else if (this.item.support.type === "support" && type === "unsupport") {
					// 之前顶了
					// 顶 -1
					this.item.support.support_count--;
					// 踩 +1
					this.item.support.unsupport_count++;
				} else if (this.item.support.type === "unsupport" && type === "support") {
					// 之前踩了
					// 顶 +1
					this.item.support.support_count++;
					// 踩 -1
					this.item.support.unsupport_count--;
				};

				this.item.support.type = type;
				uni.showToast({
					title: `${msg}成功`,
					icon: "none",
					duration: 0.3 * 1000
				});
			},
			// 评论
			doComment() {

			},
			// 分享
			doShare() {

			},
			// 发送消息
			send(data) {
				let obj = {
					headerImage: "https://picsum.photos/100/100?random=1",
					nickName: "小猫咪",
					content: data,
					date: new Date().getTime(),
					replay: 5
				};
				this.commentList.push(obj);
				// 隐藏键盘
				uni.hideKeyboard();
			},
		}
	}
</script>

<style lang="scss">
	.detailPage {
		padding: 20rpx 0rpx;
	}

	.newestComment {
		padding: 20rpx;
		font-weight: bolder;
		font-size: 1.1rem;
		letter-spacing: 10rpx;
	}
</style>
